<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据表格工具栏</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<table id="demo" lay-filter="test"></table>
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
			<!-- lay-event 给元素绑定事件名-->
				  <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
				  <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
				  <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
			</div>	  
				</script>
		
		<!-- 表头工具栏 -->
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		  
		  <!-- 这里同样支持 laytpl 语法，如： -->
<!-- 		  {{#  if(d.auth > 2){ }}
		    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
		  {{#  } }} -->
		</script>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			// field=[[
			// 		{field:'aa',type:'numbers',title:'序号'}
			// 		,{field:'aa',type:'checkbox'}
			// 		,{field:'id',title:'用户编号',sort:true,width:120,hide:true}
			// 		,{field:'username',title:'姓名',width:100}
			// 		,{field:'sex',title:'性别'}
			// 		,{field:'city',title:'城市'}
			// 		,{field:'classify',title:'职业'}
			// 		,{field:'操作',toolbar:'#barDemo'}
			// 		]]
			data_info={
				"code": 0,
				"msg": "",
				"count": 100,
				"data": [{
					"id": 10000,
					"username": "user-0",
					"sex": "女",
					"city": "城市-0",
					"sign": "签名-0",
					"experience": 255,
					"logins": 24,
					"wealth": 82830700,
					"classify": "作家",
					"score": 57
				}]
			    }
			field=[]
			$.getJSON('http://192.168.0.41:5000/title',function(data){
				console.log(data);
				field[0]=data;
				// console.log(field);
			});
			
					
			layui.use(["table","layer"],function(){
				var table=layui.table,
				 layer=layui.layer;
				
				//方法执行渲染
				table.render({
					elem:"#demo" //绑定容器的id
					,url:"js/user_data.json"//数据接口
					,height:315//设置容器高度
					,page:true //开启分页
					,cols:field
					,toolbar:"#toolbarDemo"
				});
				/**
				 * 头监听事件
				 * 语法：
				 * table.on('toolbar()')
				 * **/
				 table.on('toolbar(test)',function(obj){
					 console.log(obj);
					 var checkStatus = table.checkStatus(obj.config.id);
					   switch(obj.event){
					     case 'getCheckData':
							var arr=checkStatus.data;
							layer.alert(JSON.stringify(arr));
							break;
					     case 'getCheckLength':
					        var arr=checkStatus.data;
							layer.msg('选中了'+arr.length+"条记录！");
					        break;
					     case 'isAll':
							var flag=checkStatus.isAll;
							var str=flag?"全选":"未全选";
					        layer.msg(str);
					        break;
					   };
				 });
				 /**
				  * 监听行工具栏事件
				  * 语法：
				  * table.on('toolbar()')
				  * **/
				 table.on('tool(test)',function(obj){
					 var tr=obj.data;
					 console.log(tr);
					 //得到时间名
					 var eventName=obj.event;
					 switch(eventName){
					   case 'del':
							layer.confirm("您确认要删除吗？",function(index){
								obj.del();
								//关闭弹出层
								layer.close(index);
							});
							break;
					   case 'edit':
					        layer.prompt({
								//表单元素的类型0=文本框 1=密码框 2=文本域
								formType:0,
								value:tr.username//设置输入框的值
							},function(value,index){
								//修改指定单元格子的值
								//value表示输入的值
								obj.update({username:value});
								//关闭弹出层
								layer.close(index);
							});
					      break;
					   case 'detail':
					      layer.msg(JSON.stringify(tr));
					      break;
					 };
					 });
			});
		</script>
	</body>
</html>

